<template>
  <div class="todo-item">
    <div
      v-for="(item, index) in list.filter(x =>
        !filterType ? x : filterType === 1 ? x.checked : !x.checked
      )"
      :key="index"
    >
      <el-checkbox v-model="item.checked">{{ item.label }}</el-checkbox>
      <el-icon @click="removeHandle(index)" style="margin-left: 20px; cursor: pointer"
        ><Delete
      /></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = reactive([
  {
    checked: false,
    label: 'todo item 1'
  },
  {
    checked: false,
    label: 'todo item 2'
  },
  {
    checked: false,
    label: 'todo item 3'
  }
])
const filterType = ref(0)

const addItem = (v: string) => {
  list.push({ checked: false, label: v })
}

const removeHandle = (i: number) => {
  list.splice(i, 1)
}
// 暴露属性
defineExpose({
  addItem,
  filterType
})
</script>

<style scoped></style>
